import React, { Component } from 'react'
import IceContainer from '@icedesign/container';
import { Loading } from '@icedesign/base';
import { getFinancialOption } from '../../../echarts-figures.js';
import DataBinder from '@icedesign/data-binder';

// import { getOperationCapacityOption } from '../../../echarts-figures.js';
// import axios from 'axios';

var echarts = require('echarts');
@DataBinder({
  OCChartData: {
    url: `${global.constants.GOLDEYEGETHOST}cattle/operation_analysis`,
    type: 'get',
    defaultBindingData: {}
  },
})
export default class LineChart extends Component {

  static propTypes = {
    // secu_code: PropTypes.string.isRequired,
    // type: PropTypes.string,
  };
  
  constructor(props) {
    super(props);
    this.state = {
        RDChartID:'ThreeChart',
        message: false,
        numbers: {},
        desc_info:'',
    }
  }
  initChart(config) {
    let myChart = echarts.getInstanceByDom(document.getElementById(this.props.chartName));
    if( myChart === undefined){
        myChart = echarts.init(document.getElementById(this.props.chartName));
    }
    myChart.setOption(config);
    window.addEventListener('resize',function(){
      myChart.resize();
    })
  }
  
  componentDidMount() {
    //axios.get(`${global.constants.GOLDEYEGETHOST}cattle/jianda_index_trend?item_name=${this.props.chartName}&secu_code=${GetUrlParam("secu_code")}`)
    // axios.get(`${global.constants.GOLDEYEGETHOST}cattle/operation_analysis?item_name=${this.props.chartName}&secu_code=${GetUrlParam("secu_code")}`)
    //   .then(data => {
    //     debugger;
    //   data = data.data;
    this.props.updateBindingData('OCChartData',{
      params: {
        secu_code:GetUrlParam("secu_code"),
        item_name:this.props.chartName,
      }
    }, (data) => {
      // console.log("营运分析",typeof(data.data));
      if(!data.flag || JSON.stringify(data.data) === '{}'){
        this.setState({
          message: true
        })
      }else{
        console.log('chartName:', this.props.chartName);
        const chartName = this.props.chartName;
        const fds = data.data.charts.filter((item)=> {
          return item.name === this.props.chartName
        })
        console.log('筛选数据：', fds.length);
        if(fds.length === 0) {
          this.setState({
            message: true
          })
          return;
        }
        const fd = fds[0];
        // console.log("finance data fd.x, fd.self, fd.average, fd.yysr, fd.yylr, fd.market_value:",fd.x, fd.self, fd.average, fd.yysr, fd.yylr, fd.market_value);
        this.setState({
          message: false,
          numbers: getFinancialOption(fd.x, fd.self, fd.average, fd.yysr, fd.yylr, fd.market_value),
        });
        this.initChart(this.state.numbers,this.props.chartName);
      }
      });
  }

  render() {
    const { OCChartData } = this.props.bindingData;
    return (
      <div>
        <IceContainer>
          <Loading 
            style={{width: "100%"}}
            visible={OCChartData.__loading ? true : false}
            shape="fusion-reactor"
          >
          <div id={this.props.chartName} style={{width: "100%", height: '500px'}}>
            {this.state.message && 
              <div style={{
                fontSize: '25px',
                height: '500px',
                lineHeight: '500px',
                textAlign: 'center'
              }}>
                没有相关数据
              </div>
            }
          </div>
          </Loading>
        </IceContainer>
        <IceContainer title="指标解释" style={{margin:'0 50px'}}>
          {this.props.des}
        </IceContainer>
      </div>
    )
  }
}
